<template>
  <div class='user-main container'>
    <div class="user-warpper">
      <div class="userBox">
        <div class="backgroupImg">
          <img v-lazy="bjCover" :key="bjCover">
            <el-row type="flex" class="row-bg top-btn">
                <el-col :span="18">
                    <div class="grid-content bg-purple">
                        <a class="topBtnItem">
                            <div>{{ signRecord.totalDay}}</div>
                            总签到天数
                        </a>
                    </div>
                </el-col>
                <el-col :span="18">
                    <div class="grid-content bg-purple-light">
                        <a class="topBtnItem">
                            <div>{{ signRecord.continuousDay}}</div>
                            连续签到天数
                        </a>
                    </div>
                </el-col>
            </el-row>
          <div class="more">
            <div class="menu">
              <ul>
                <li @click="handleUpdateInfo">
                  <svg-icon icon-class="edit"></svg-icon> 修改资料
                </li>
                <li @click="handleClikeMoreData">
                  <svg-icon icon-class="xiangqing"></svg-icon> 更多资料
                </li>
<!--                <li>-->
<!--                    <el-upload class="avatar-uploader" :show-file-list="false" ref="upload" name="filedatas"-->
<!--                               :action="uploadPictureHost" :http-request="uploadBjCoverFile"-->
<!--                               :before-upload="handleUploadBefore" multiple>-->
<!--                    <svg-icon icon-class="photo"></svg-icon> 修改封面-->
<!--                  </el-upload>-->
<!--                </li>-->
              </ul>
            </div>
            <i class="el-icon-more-outline"></i>
          </div>

        </div>
        <div class="user-item">
          <div class="toolbar">
            <img class="cover" :src="user.avatar" alt="">
          </div>
          <div class="userInfo">
            <div class="nickname">
              昵称：<span>{{ user.nickname }}</span>
              <el-tooltip class="item" effect="dark" content="LV1" placement="top">
                  <span>
                      <svg-icon icon-class="level1"></svg-icon>
                  </span>
              </el-tooltip>

            </div>
            <div class="desc">
                座右铭：{{ user.mark ? user.mark : "这家伙很懒，什么都没有写..." }}
            </div>
          </div>
          <div class="sign">
            <button :class="!isTodaySign ? 'signBtn' : 'disabledSignBtn'" :disabled="isTodaySign"
                    @click="handleSign">
              <svg-icon icon-class="sign1"></svg-icon>
              <span>{{ isTodaySign ? "今天已签到" : "立即签到" }}</span>
            </button>
          </div>
        </div>

      </div>
      <div class="bottom-box">
        <div class="title">
          <ul>
            <li ref="btn" :class="index === 0 ? 'active' : ''"
                v-for="(item, index) in noticeList" :key="index">
                <span class="item-title">
                    <i :class="item.icon"></i> {{ item.name }}
                </span>
            </li>
          </ul>
        </div>
          <el-card v-for="(record, index) in signInConfigList" :key="index">
              <div slot="header">第{{ record.day }}天签到，获取{{ record.point }}积分</div>
          </el-card>
      </div>

    </div>


    <el-dialog title="个人信息" center :visible.sync="dialogTableVisible" :lock-scroll="false"
               :close-on-click-modal="false">
      <div style="">
        <div class="dialogItem item">
          <span>
              昵称：{{ form.nickname }}
          </span>
            <span>
              性别：
              <template v-if="form.sex === 0">
                  保密
              </template>
              <template v-else-if="form.sex === 1">
                  男
              </template>
              <template v-else-if="form.sex === 2">
                  女
              </template>
            </span>
            <span>
              手机号： {{ form.mobile }}
          </span>
        </div>
        <div class="dialogItem item">
          <span>
              积分： {{ form.point }}
          </span>
          <span>
              经验： {{ form.experience }}
          </span>
              <span>
                  等级：
                  <template v-if="form.levelName === null">
                      无
                  </template>
                  <template v-else>
                      {{ form.levelName }}
                  </template>
              </span>
        </div>
          <div class="dialogItem item">
            <span>
                注册IP： {{ form.registerIp }}
            </span>
            <span>
                注册时间： {{ parseTime(form.createTime)}}
            </span>
          </div>
          <div class="dialogItem item">
            <span>
                最后登录IP： {{ form.loginIp }}
            </span>
              <span>
                最后登录时间： {{ parseTime(form.loginDate)}}
            </span>
          </div>
      </div>
    </el-dialog>

    <!-- 修改资料弹出框 -->
    <el-dialog title="修改资料" center :visible.sync="editDialogTableVisible" :lock-scroll="false"
               :close-on-click-modal="false">
      <el-form label-position="left" label-width="60px" :model="form">
        <el-form-item label="头像：">
            <el-upload class="avatar-uploader" :show-file-list="false" ref="upload" name="filedatas"
                       :action="uploadPictureHost" :http-request="uploadSectionFile" :before-upload="handleUploadBefore"
                       multiple>
                <img v-if="form.avatar" style="width: 50%;height: 50%;" :src="form.avatar" class="imgAvatar">
                <i v-else class="el-icon-plus avatar-img-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="座右铭：">
          <el-input v-model="form.mark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateUserInfo">提交</el-button>
            </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  updateUserInfo, getUserInfo, upload,
} from '@/api'

import {getSignInConfigList, sign, validateTodayIsSign} from '@/api/sign'
import {parseTime} from "@/utils";
export default {
  data() {
    return {
        bjCover: '',
      user: this.$store.state.userInfo,
      uploadPictureHost: process.env.VUE_APP_BASE_API + "/infra/file/upload",
      dataList: [],
        noticeList: [],
      pageData: {
        pageNo: 1,
        pageSize: 10,
        index: 0
      },
        signInConfigList: [],
      statusStyle: ["#F56C6C", "#67C23A", "#909399", "#E6A23C"],
      form: {
      },
        levelId: '', // 会员等级编号
        signRecord: {},
      files: {},
      dialogTableVisible: false,
      editDialogTableVisible: false,
      feedbackDialogTableVisible: false,
      tagStyle: ["success", "warning", "danger", "info"],
      today: new Date().getFullYear() + '-' + (new Date().getMonth() + 1 < 10 ? ('0' + (new Date().getMonth() + 1)) : new Date().getMonth() + 1) + '-'
          + (new Date().getDate() < 10 ? ('0' + new Date().getDate()) : new Date().getDate()),
      isTodaySign: false,
      rules: {
        title: [
          { required: true, message: '请输入反馈标题', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择反馈类型', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入反馈详细内容', trigger: 'blur' },
        ],
      },
        count: {
            article: 0,
            collect: 0,
            note: 0,
            followed: 0,
        }
    }
  },
  created() {
    this.validateTodayIsSign()
    this.getSignInConfigList()
      this.initBjCover();
  },
  methods: {
      parseTime,
      handleUpdateInfo() {
          this.handleBefore()
          this.editDialogTableVisible = true
      },
      initBjCover(){
          // 发起 GET 请求
          fetch('https://admin.chengke.net/shiyi/system/article/randomImg')
              .then(response => response.json()) // 将响应解析为 JSON 格式
              .then(data => {
                  console.log(data); // 打印返回的数据
                  // 在这里可以对返回的数据进行处理
                  this.bjCover = data.data
              })
              .catch(error => console.error('发生错误:', error)); // 捕获并打印错误
      },
      getSignInConfigList(){
          getSignInConfigList().then(res =>{
            this.signInConfigList=res.data;
          })
      },
    validateTodayIsSign() {
      validateTodayIsSign().then(res => {
          this.signRecord = res.data
          this.isTodaySign=res.data.todaySignIn
      })
    },
    handleSign() {
      sign(this.today).then(res => {
        this.isTodaySign = true
        this.$toast.success('签到成功')
        this.validateTodayIsSign()
      })
    },
    after() {
        this.$store.commit('setUserInfo', this.user)
    },
    updateUserInfo() {
      updateUserInfo(this.form).then(res => {
        this.user = this.form
        this.$toast.success('修改成功')
        this.after()
        this.editDialogTableVisible = false
      })
    },
    handleClike(id, path) {
      this.$router.push({ path: path, query: { id: id } })
    },
    handleClikeMoreData() {
      this.handleBefore()
      this.dialogTableVisible = true
    },
    handleBefore() {
      getUserInfo().then(res => {
        this.form = res.data
      })
    },
    handleUploadBefore() {
        this.$bus.$emit('show');
    },
    uploadSectionFile: function (param) {
      this.files = param.file
      // FormData 对象
      var formData = new FormData()
      // 文件对象
      formData.append('file', this.files)
      upload(formData).then(res => {
        this.form.avatar = res.data
          this.$bus.$emit('close')
      }).catch(err => {
          this.$bus.$emit('close')
      })
    },
  },
}
</script>


<style lang='scss' scoped>
/deep/ .vuepress-markdown-body {
  background-color: var(--background-color);
  color: var(--article-color);
}

/deep/ .el-dialog {
  .el-dialog__body {
    padding: 10px 20px;
  }

  .item {
    margin-bottom: 10px;
  }

  .dialogItem {
    display: flex;

    span {
      width: 50%;
    }
  }
}

.user-main {

  @media screen and (max-width: 1118px) {
    padding: 10px;

    /deep/ .el-dialog {
      width: 90%;
      border-radius: 10px;

      .dialogItem {
        display: flex;

        span {
          width: 50%;
        }
      }
    }

    .backgroupImg img {
      height: 200px;
    }

    .user-item .toolbar {
      margin-left: 20px;
      width: 100px;

    }

    .sign {
      display: none;
    }
    .backgroupImg img {
      height: 400px;
    }

    .user-item .toolbar {
      margin-left: 50px;
      width: 150px;

    }
    .user-warpper {
      width: 100%;
      margin-top: 80px;
    }

    .article-cover {
      display: none;
    }
  }

  @media screen and (min-width: 1119px) {
    /deep/ .el-dialog {
      width: 30%;
      border-radius: 10px;

      .dialogItem {
        display: flex;

        span {
          width: 50%;
        }
      }
    }

    .backgroupImg img {
      height: 400px;
    }

    .user-item .toolbar {
      margin-left: 50px;
      width: 150px;

    }
    .user-warpper {
      width: 60%;
      margin-top: 80px;
    }

    .article-cover {
      width: 160px;
      height: 150px;
      cursor: url(https://qiniu.chengke.net/link.cur), pointer;
      overflow: hidden;
      border-radius: 5px;

      img {
        height: 100%;
        width: 100%;
        border-radius: 5px;
        transition: all 0.5s;
      }



      &:hover {
        img {
          transform: scale(1.1);
        }
      }
    }

    .sign {
      position: absolute;
      right: 50px;
      padding: 5px;
      border-radius: 5px;

      .signBtn,
      .disabledSignBtn {
        border: none;
        cursor: url(https://qiniu.chengke.net/link.cur), pointer;
        color: var(--text-color);
        background-color: var(--background-color);
      }

      .signBtn {
        &:hover {
          color: var(--theme-color);
        }
      }

      .disabledSignBtn {
        cursor: no-drop;

      }

      svg {
        width: 20px;
        height: 20px;
        vertical-align: -4px;
        margin-right: 5px;
      }
    }
  }

  .user-warpper {
    display: flex;
    flex-direction: column;
  }

  .userBox {
    background-color: var(--background-color);

    .backgroupImg {
      position: relative;
      width: 100%;

      .top-btn {
        width: 100%;
        position: absolute;
        top: 0;
        display: flex;
        background: linear-gradient(90deg, rgba(220, 233, 242, 0.5), rgba(255, 255, 255, 0.5), rgba(220, 233, 242, 0.4));
        text-align: center;
      }

      img {
        width: 100%;
      }

      .more {
        position: absolute;
        right: 20px;
        bottom: 10px;
        cursor: url(https://qiniu.chengke.net/link.cur), pointer;
        font-size: 20px;
        background-color: #90939987;
        border-color: #909399;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        text-align: center;
        color: #fff;

        i {
          margin-top: 5px;
        }

        .menu {
          background-color: var(--background-color);
          color: var(--text-color);
          padding: 10px 0;
          border-radius: 5px;
          font-size: 0.9rem;
          width: 100px;
          text-align: center;
          position: absolute;
          right: -15px;
          bottom: 30px;
          display: none;
          animation: fade-in 0.3s linear 1;
          width: 120px;

          @keyframes fade-in {
            0% {
              transform: scale(0);
            }

            100% {
              transform: scale(1);
            }
          }

          ul {
            list-style: none;
          }

          li {
            padding: 5px;
            transition: transform .35s !important;

            &:hover {
              color: var(--theme-color);
              transform: translateX(6px);
            }
            svg {
              width: 20px;
              height: 20px;
              vertical-align: -5px;
            }
          }
        }

        &:hover {
          background-color: #909399;
          .menu {
            display: block;
          }
        }
      }
    }

    .user-item {
      height: 80px;
      display: flex;
      margin-bottom: 20px;
      position: relative;
      align-items: center;

      .toolbar {
        padding: 5px;
        background-color: var(--background-color);
        border-radius: 5px;
        margin-top: -80px;
      }

      .cover {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }

      .userInfo {
        margin: 20px;
        color: var(--article-color);
        font-style: italic;

        .nickname {

          margin-bottom: 10px;


          svg {
            width: 35px;
            height: 35px;
            vertical-align: -12px;
          }

          span {
            margin-right: 5px;
            font-weight: 700;
            background: radial-gradient(circle at 49.86% 48.37%, #0090ff 0, #0089ff 3.33%, #3a82ff 6.67%, #717aff 10%, #9371fb 13.33%, #ae67ef 16.67%, #c45de1 20%, #d652d2 23.33%, #e448c2 26.67%, #ef3eb0 30%, #f7369e 33.33%, #fd318c 36.67%, #ff317a 40%, #ff3569 43.33%, #fd3d57 46.67%, #f94646 50%, #f35035 53.33%, #ea5a22 56.67%, #e16308 60%, #d56d00 63.33%, #c97500 66.67%, #bb7d00 70%, #ac8300 73.33%, #9d8900 76.67%, #8c8f00 80%, #7a9300 83.33%, #669700 86.67%, #4f9b00 90%, #309e0e 93.33%, #00a029 96.67%, #00a23d 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .desc {

          font-size: 0.9rem;
        }
      }
    }

  }


  .bottom-box {
    border-radius: 10px;
    margin-top: 20px;
    //padding: 10px;
    min-height: 500px;

    .title {
      padding: 10px;

      ul {
        display: flex;
        list-style: none;

        li {
          margin-right: 20px;
          cursor: url(https://qiniu.chengke.net/link.cur), pointer;
          color: var(--text-color);

          &:hover {
            color: var(--theme-color);
          }

          .item-title {
            margin-right: 5px;
          }
        }

        .active {
          color: var(--theme-color);
          font-weight: 700;
          font-style: italic;
        }
      }

      border-bottom: 1px solid var(--border-line);
    }

    .btnBox {
      padding: 10px;

      .btn {
        display: inline-block;
        margin-right: 10px;
        background-color: rgba(136, 136, 136, .1);
        padding: 6px;
        border-radius: 5px;
        font-size: 0.9rem;
        color: var(--text-color);
        cursor: url(https://qiniu.chengke.net/link.cur), pointer;

        &:hover {
          background-color: var(--theme-color);
          color: #fff;
        }
      }
    }

    .articleBox {
      height: 100%;
      padding-top: 10px;

      .articleItem {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }

      .article {
        display: flex;
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
        //margin-right: 10px;
        margin-left: 10px;
        background-color: var(--background-color);
        overflow: hidden;

        .status {
          padding: 2px 30px;
          width: 80px;
          position: absolute;
          right: -50px;
          top: 5px;
          opacity: 0.8;
          transform: rotate(45deg);
          color: #fff;
          text-align: center;
        }

        .articleBtn {
          position: absolute;
          right: 0;
          display: none;
        }

        &:hover {
          .articleBtn {
            display: block;
          }

          background-color: #9093994a;
        }

        .article-info {
          margin-left: 20px;
          width: 70%;
          position: relative;

          a {
            text-decoration: none;
            color: var(--article-color);
          }

          .article-title {
            font-size: 1.1rem;
            font-weight: 600;
            -webkit-line-clamp: 1;

            &:hover {
              color: var(--theme-color);
            }
          }

          .article-title,
          .article-desc {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .article-desc {
            -webkit-line-clamp: 3;
            margin-bottom: 10px;
            margin-top: 5px;
            color: var(--text-color);
            min-height: 60px;
          }

          .article-tag {
            .el-tag {
              margin-right: 5px;
              cursor: url(https://qiniu.chengke.net/link.cur), pointer;
            }
          }

          .article-user {
            display: flex;
            align-items: center;
            margin-top: 10px;

            .nickname {
              color: var(--theme-color);
            }

            .item {
              padding: 0 5px;
              color: var(--text-color);

              i {
                margin-right: 5px;
              }
            }
          }
        }


      }

      .note {
        margin-bottom: 20px;
        border-bottom: 2px dashed var(--border-line);
        margin-right: 10px;

        .time {
          color: var(--text-color);
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>

